<template>
  <div class="container">
    <div class="search-box">
      <van-search
        :value='keyword'
        placeholder="点击输入搜索内容"
        use-action-slot
        shape="round"
        @change="onChangeVal"
        @search="onSearch"
        :autofocus="true"
        ref="searchBox"
      >
        <div class="search-btn" size="small" slot="action" @tap="onSearch2">搜索</div>
      </van-search>
    </div>
    <div :style="{'padding-top': 44 + 'px;'}">
      <div v-for="(item, index) in orders" :key="index">
        <div class="order-div">
          <div class="pad-15">
            <div class="flex flex-between mar-b-16 line-h-1">
              <div class="font-14 font-w">订单号：{{item.orderNo}}</div>
              <div class="font-14 font-w" style="color: #F8303D;">{{orderStatusMap[item.orderStatus]}}</div>
            </div>
            <div class="flex mar-b-18" v-for="(goods, goodsIndex) in item.orderGoodsList" :key="goodsIndex" @click="queryOrderInfo(item)">
              <div class="mar-r-10"><img :src="goods.goodsImageUrl" class="img-item" /></div>
              <div class="flex-item">
                <div class="goods-title mar-t--3">{{ goods.goodsTitle }}</div>
                <div class="flex flex-between font-color-9 mar-t-10" v-if="goods.skuDetail">
                  <div class="goods-prop font-11">{{ goods.skuDetail }}</div>
                  <div class="font-15 align-r"> ×{{ goods.goodsNum }}</div>
                </div>
                <div class="flex flex-between" :class="goods.skuDetail ? 'mar-t-14' : 'mar-t-42'">
                  <div class="font-12 line-h-1" style="color: #F82A37;" v-if="goods.goodsPrice === '0.00'">免费寄样</div>
                  <div class="font-12 font-w line-h-1" v-else>¥<span class="font-16">{{goods.goodsPrice}}</span></div>
                  <div class="font-15 align-r font-color-9" v-if="!goods.skuDetail"> ×{{ goods.goodsNum }}</div>
                </div>
              </div>
            </div>
            <div class="font-w font-14 text-align-r">
              <span>合计：{{item.orderPrice}}</span>
              <span class="mar-l-10">共{{item.goodsCount}}件</span>
            </div>
          </div>
          <div class="opration-row pad-r-15" v-if="item.orderStatus !== 0 && item.orderStatus !== 1">
            <span v-if="item.orderStatus===2 || item.orderStatus===3" class="order-btn mar-l-10" @click="queryExpress(item)">查看物流</span>
            <span v-if="item.orderStatus===2" class="comfirm-btn order-btn mar-l-10" @click="receivingGoods(item)">确认收货</span>
          </div>
        </div>
      </div>
      <div class="align-c nodata" v-if="nodata">
        <img v-if="fileSpace" mode="widthFix" class="width-205 height-173" :src="fileSpace + '/images/anchor-nodata.png'" />
        <div class="pad-t-10 font-16 font-color-9">暂时还没有您搜索的内容~</div>
      </div>
    </div>
    <!-- <div class="nodata" v-if="nodata">
        <img v-if="fileSpace" :src="fileSpace + '/images/anchor-nodata.png'" class="width-205 height-173" alt="">
        <div class="align-c mar-t-20 font-16 font-color-9">
        暂时还没有您搜索的内容~
        </div>
    </div> -->
  </div>
</template>
<script>
import { pageCustomerOrder, doReceiveGoods } from '@/api/personal'
export default {
  data() {
    return {
      pullLoad: {
        loading: false,
        finished: false
      },
      keyword: '',
      orders: [],
      orderStatusMap: {
        '0': '已取消',
        '1': '待发货',
        '2': '待收货',
        '3': '已收货'
      },
      currentPage: 1,
      nodata: false
    }
  },
  computed: {
    anchored() {
      return this.getCustomerId && this.getAnchorType
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
  },
  onReachBottom() {
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.getOrderList()
    }
  },
  methods: {
    resetData() {
      // 重置数据
      this.nodata = false
      this.pullLoad.finished = false
      this.currentPage = 1
      this.orders = []
    },
    onSearch(e) {
      // 键盘直接搜索点击事件
      this.keyword = e.mp.detail
      this.resetData()
      this.getOrderList()
    },
    onChangeVal(e) {
      this.keyword = e.mp.detail
    },
    onSearch2() {
      // 搜索按钮点击事件
      this.resetData()
      this.getOrderList()
    },
    // 确认收货
    receivingGoods(item) {
      const that = this
      this.$pt.showModal({
        content: '是否确认收货？',
        success(res) {
          if (res.confirm) {
            console.log('收货')
            that.doReceiveGoods(item)
          } else if (res.cancel) {
            console.log('用户取消')
          }
        }
      })
    },
    // 去订单详情
    queryOrderInfo(item) {
      this.$pt.navigateTo({ url: `/pages/personal/order/detail/main?orderId=${item.orderId}` })
    },
    // 查看物流
    queryExpress(item) {
      if (item.apartOrderIds.length > 1) {
        this.$pt.navigateTo({ url: `/pages/personal/order/express-view/main?orderId=${item.orderId}` })
      } else {
        this.$pt.navigateTo({ url: `/pages/personal/order/express-detail/main?orderId=${item.orderId}` })
      }
    },
    getOrderList() {
      const params = {
        customerMemberId: this.getCustomerId,
        orderStatusInfo: '',
        keyword: this.keyword,
        currentPage: this.currentPage,
        size: 10
      }
      this.nodata = false
      pageCustomerOrder(params).then(response => {
        if (response.isError) return
        if (response.data.total === 0) {
          this.nodata = true
          this.pullLoad.finished = true
          return
        }
        response.data.records.forEach(item => {
          item.goodsCount = 0
          const apartOrderSet = new Set()
          item.orderGoodsList.forEach(value => {
            item.goodsCount += value.goodsNum
            apartOrderSet.add(value.apartOrderId)
          })
          item.apartOrderIds = [...apartOrderSet]
          this.orders.push(item)
        })
        this.currentPage++
        if (this.orders.length === 0 || this.orders.length >= response.data.total) {
          this.pullLoad.finished = true
        }
      }).catch(() => {
      })
    },
    doReceiveGoods(item) {
      doReceiveGoods(item).then(response => {
        if (response.isError) return
        this.$utils.showToast({ title: '确认收货成功' })
        this.orders = []
        this.currentPage = 1
        this.pullLoad.finished = false
        this.getOrderList()
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  min-height: 100vh;
}
.search-box {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: white;
  z-index: 9;
  // 对搜索框进行改造
  /deep/ .van-search--show-action {
    background: unset !important;
    padding-right: unset;
  }
  /deep/ .van-cell {
    background: #f4f4f4;
    border-radius: 25px;
  }
  /deep/ .van-search__action {
    background: white;
    font-size: 20px;
    color: #333333;
    font-weight: bold;
  }
}
.income {
  background: #ffe1d1;
  color: #ff5a00;
  font-size: 12px;
  border-radius: 5px;
  padding: 2px 4px;
  line-height: 1;
  display: inline-block;
}
.border-b {
  border-bottom: #e4e4e4 1px solid;
}
.order-div {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  font-size: 13px;
}
.line-h-1{
  line-height: 1;
}
.goods-prop {
  box-sizing: border-box;
  height: 22px;
  line-height: 22px;
  padding: 0 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-word;
  background-color: #F7F9FB;
  border-radius: 2px;
  max-width: 150px;
}
.goods-title {
  height: 20px;
  line-height: 20px;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  word-break:break-word;
  font-size: 16px;
  font-weight: bold;
  margin-right: 30px;
  margin-top: 3px;
}
.img-item {
  width: 90px;
  height: 90px;
  border-radius: 5px;
}
.order-btn {
  background-color: #fff;
  color: #666666;
  font-size: 13px;
  line-height: 1;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 13.5px;
  border: #E9E9E9 1px solid !important;
}
.opration-row{
  text-align: right;
  border-top: 0.5px solid #E5E5E5;
  height: 50px;
  line-height: 50px;
}
.comfirm-btn{
  border: 1px solid #7427FF !important;
  color: #7427FF;
}
.mar-t-42{
  margin-top: 42px;
}
.nodata {
  margin-top: 85px;
  img{
    margin: 0 auto;
  }
}
</style>
